<div class="middle surface-shaded">
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-10">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <div ng-if="!targetKind || !targetName || !project" class="mar-top-md">
            Loading...
          </div>
          <form name="form" ng-submit="save()" class="osc-form" ng-show="targetKind && targetName">
            <h1>
              Autoscale {{targetKind | humanizeKind : true}} {{targetName}}
            </h1>
            <div class="help-block">
              Scale replicas automatically based on CPU usage.
            </div>
            <div class="learn-more-block" ng-class="{ 'gutter-bottom': metricsWarning || showCPURequestWarning }">
              <a href="{{'pod_autoscaling' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden> </i></a>
            </div>

            <!-- Warning: metrics not configured -->
            <div ng-if="metricsWarning" class="alert alert-warning">
              <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
              <span class="sr-only">Warning:</span>
              Metrics might not be configured by your cluster administrator. Metrics are
              required for autoscaling.
            </div>

            <!-- Warning: CPU request not set -->
            <div ng-if="showCPURequestWarning" class="alert alert-warning">
              <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
              <span class="sr-only">Warning:</span>
              This {{targetKind | humanizeKind}} does not have any containers with a CPU
              <span ng-if="'cpu' | isRequestCalculated : project">limit</span>
              <span ng-if="!('cpu' | isRequestCalculated : project)">request</span>
              set. Autoscaling will not work without a CPU
              <span ng-if="'cpu' | isRequestCalculated : project">limit.</span>
              <span ng-if="!('cpu' | isRequestCalculated : project)">request.</span>
            </div>

            <!-- Warning: V2Beta1 HPA -->
            <div ng-if="usesV2Metrics" class="alert alert-warning">
              <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
              <span class="sr-only">Warning:</span>
              This autoscaler uses a newer API, consider editing it with the
              <a href="command-line" target="_blank">command line tools</a>.
            </div>


            <fieldset ng-disabled="disableInputs" class="gutter-top">
              <osc-autoscaling
                  model="autoscaling"
                  show-name-input="true"
                  name-read-only="kind === 'HorizontalPodAutoscaler'"
                  show-request-input="autoscaling.targetCPU && !(usesV2Metrics)">
              </osc-autoscaling>

              <label-editor
                labels="labels"
                expand="true"
                can-toggle="false"></label-editor>

              <div class="buttons gutter-top gutter-bottom">
                <button
                    type="submit"
                    class="btn btn-primary btn-lg"
                    ng-disabled="form.$invalid || form.$pristine">
                  Save
                </button>
                <a href="" ng-click="cancel()" class="btn btn-default btn-lg" role="button">Cancel</a>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div><!-- /middle-content -->
</div><!-- /middle -->
